<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>博主主页</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/common.css}" rel="stylesheet">
    <link th:href="@{/css/user.css}" rel="stylesheet">
    <link th:href="@{/css/viewblogger.css}" rel="stylesheet">

</head>
<body>
<div class="container" style="background:white">
    <div th:replace="~{commons/common::header}"></div>
    <div th:replace="~{commons/common::topbar}"></div>
    <div class="row">
        <div class="col-md-9 col-sm-12">
            <div class="user-info-box">
                <div class="user-info-inner-box">
                    <div>
                        <div class="user-innerbox">
                            <div class="row">
                                <div class="col-md-2 col-sm-5">
                                    <a><img th:src="@{/{src}(src=(${blogger.image}==''? 'imgs/default.jpg':'upload/'+${blogger.image}))}"
                                            class="profile-photo img-circle" alt="Responsive image" id="bloggerImage"/></a>
                                </div>
                                <div class="col-md-7 col-sm-4 picinfo">
                                    <h3>[[${blogger.nickname}]] <img th:src="@{/{src}(src = (${blogger.sex}==1? 'imgs/man.jpg':'imgs/woman.jpg'))}" id="man_icon"/></h3>
                                    <p>粉丝: <span class="badge" style="color: pink">[[${blogger.fans}]]</span>&nbsp;&nbsp;|&nbsp;&nbsp;获赞数: <span
                                            class="badge" style="color: #9acfea">[[${blogger.likes}]]</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                                        发表微博总数: <span class="badge" style="color: #00dd1c;">[[${blogger.blogCount}]]</span></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ul id="myTab" class="nav nav-tabs" style="margin-top: 10px">
                        <li class="active">
                            <a href="#information" data-toggle="tab">
                                基本信息
                            </a>
                        </li>
                        <li>
                            <a href="#hisBlogs" data-toggle="tab">
                                博主的博客
                            </a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="information" style="margin-top: 20px">
                            <form class="form-horizontal" method="get">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">省份</label>
                                    <div class="col-sm-8">
                                        <select name="userProvince" id="userProvince" class="form-control reg-select">
                                            <option value="0" th:text="${blogger.province}">请选择省会</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">城市</label>
                                    <div class="col-sm-8">
                                        <select name="userCity" id="userCity" class="form-control reg-select">
                                            <option value="0" th:text="${blogger.city}">请选择城市</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">生日</label>
                                    <div class="col-sm-8">
                                        <input th:value="${blogger.birthday}" type="text" id="datetimepicker" name="userBirthday"
                                               class="form-control reg-input" autocomplete="off">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">个性签名</label>
                                    <div class="col-sm-8">
                                        <input th:value="${blogger.signature}" type="text" id="userSignature" name="userSignature"
                                               class="form-control reg-input" autocomplete="off">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="hisBlogs">
                            <table class="table table-hover table-striped text-center" style="margin-top: 10px">
                                <thead>
                                <tr>
                                    <th class="text-center">序号</th>
                                    <th class="text-center">发布时间</th>
                                    <th class="text-center">博客标题</th>
                                    <th class="text-center">博客类型</th>
                                    <th class="text-center">观看数</th>
                                    <th class="text-center">点赞数</th>
                                    <th class="text-center">查看</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="blog,stat:${blogs}">
                                    <td th:text="${stat.count}"></td>
                                    <td th:text="${blog.createTime}"></td>
                                    <td th:text="${blog.title}"></td>
                                    <td th:text="${blog.blogLabel}"></td>
                                    <td th:text="${blog.views}"></td>
                                    <td th:text="${blog.likes}"></td>
                                    <td>
                                        <a th:href="@{/blog/detail/{id}(id = ${blog.id})}">
                                            <span style="color: royalblue" class="glyphicon glyphicon-search"></span>
                                        </a>
                                    </td>
                                </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-12">
            <div th:replace="~{commons/common::headerimage}"></div>
            <div th:replace="~{commons/common::hotrange}"></div>
        </div>
    </div>
    <div th:replace="~{commons/common::footer}"></div>
</div>

</body>

<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/button.js}"></script>
</html>







